<template>
    <h1 ref="myh1">我是 APP 组件 --- {{ num }}</h1>
    <button @click="clickBtn">修改 num 的值</button>
</template>

<script>
export default {
    data() {
        return {};
    },
    methods: {
        clickBtn () {
            /**
             *  当前我们页面中使用了一个 data 中没有显式声明的一个变量
             *  然后在函数中 对这个变量进行了修改, 此时vue是无法检测到我们的变量发生变化
            */
            this.num = 100
            // console.log('此时应该给 num 重新赋值', this.num)

            this.$forceUpdate() // 调用之后能够强制更新页面, 但是 vue 表明当你在开发中需要使用这个方法的时候, 大概率你的代码有问题, 应该修改代码
        }
    },
};
</script>

<style></style>
